<template>
<div class="container" @click="handleGallaryClick">
	<div class="wrapper">
		<swiper :options="swiperOption">
    			<!-- slides -->
   	 		<swiper-slide v-for="(item,index) in imgs"
   	 			:key='index'>
   	 			<img class="swiper-img" :src="item"/>
   	 		</swiper-slide>
			
   			
    			<!-- Optional controls -->
    			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</div>
</template>

<script>
	export default {
		name:'CommomGallary',
		props:{
			imgs:{
				type:Array
			}
		},
		data(){
			return {
				swiperOption:{
					pagination:'.swiper-pagination',
					paginationType:'fraction',
					aotoplay:false,
					observeParents:'true',
					observer:'true'
					
					
				}
			}
		},
		methods:{
			handleGallaryClick(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="stylus" scoped>
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	z-index: 99;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #000;
}
.wrapper {
	background: white;
	
	/*overflow: hidden;*/
	height: 0;
	width: 100%;
	padding-bottom: 100%;
	
}
.swiper-img {
	width: 100%;
}
.swiper-pagination {
	color: #fff;
	bottom: -1rem;
}

.swiper-container {
	overflow: inherit;
}
</style>